<script setup>
import uniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import uniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import uniDatetimePicker
  from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import uniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import AddressPicker from "../../components/lingdang-AddressPicker/AddressPicker.vue";
import alladdress from  "../../components/lingdang-AddressPicker/AddressData"
import {ref} from 'vue'
import uniFilePicker from "../../uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue";
const range = [{
  "value": 1,
  "text": "病假",
}, {
  "value": 2,
  "text": "事假",
}, {
  "value": 3,
  "text": "其他"
}]
const rangecity = [{
  "value": 1,
  "text": "山西",
}, {
  "value": 2,
  "text": "成都",
}, {
  "value": 3,
  "text": "北京",
}, {
  "value": 4,
  "text": "上海"
},{
  "value": 5,
  "text": "其他",
}, ]
const change = (e) => {
  console.log('单选值:', e);
  console.log("range", this.range)
  console.log("value", this.value)
}

const single = '';
const datetimesingle = '';
const range1 = ['2021-02-1', '2021-3-28'];
const datetimerange = [];
const start = Date.now() - 1000000000;
const end = Date.now() + 1000000000;
const range2 = () => {
  console.log("范围选:", this.range);
}
const maskClick=(e)=>{
  console.info(11111)
  console.log('maskClick事件:', e);
  console.log(e);
}
const choosecity=ref('请选择地址')
const addresschange=(value)=>{
  const indexArr=value.detail.value
  const shengindex=indexArr[0]
  const shiindex=indexArr[1]
  const quindex=indexArr[2]
  choosecity.value=alladdress[shengindex].name+alladdress[shengindex].children[shiindex].name+alladdress[shengindex].children[shiindex].children[quindex].name;}
const tonewpages=()=>{
  uni.navigateTo({url:"/pages/user/user/newindex"})
}
</script>

<template>
  <view class="h2">
    <view class="h1">
      <uni-section title="请假类型" type="line">
        <view class="uni-px-5 uni-pb-5">
          <uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
        </view>
      </uni-section>
      <uni-section title="请假时间" type="line"></uni-section>
      <view class="example-body0">
        <uni-datetime-picker v-model="range2" type="daterange" @change="maskClick" />
      </view>
      <view><uni-section title="请假去向" type="line"></uni-section>
        <AddressPicker class="address" @change="addresschange" :level="3">{{choosecity}}</AddressPicker>
      </view>
      <uni-section title="详细地址" type="line"></uni-section>
      <view class="editor-wrapper">
        <editor id="editor" class="ql-container" placeholder="请在这里说明..." show-img-size show-img-toolbar
                show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
        </editor>
      </view>
      <view class="h3">
      <uni-section class="kuang" title="联系方式" type="line" padding>
        <uni-easyinput class="content" errorMessage v-model="value" focus placeholder="请输入电话号码" @input="input"></uni-easyinput>
      </uni-section>
      </view>
      <view class="h4">
        <uni-section class="kuang1" title="紧急联系人电话" type="line"  padding>
          <uni-easyinput class="content1" errorMessage v-model="value" focus placeholder="请输入电话号码" @input="input"></uni-easyinput>
        </uni-section>
      </view>
      <view class="h5">
        <uni-section class="title1" title="请假材料（非必填）"  type="circle">
          <view class="example-body">
            <uni-file-picker class="filepick" limit="9" title="注意：病假的同学请上传医院证明，其余请假同学请上传其他证明材料，图片单张大小不超过2M"></uni-file-picker>
          </view>
        </uni-section>
      </view>
      <view class="h6">
        <button class="btn" type="warn" @click="tonewpages">提交</button>
      </view>
    </view>
  </view>
</template>

<style scoped>
.h2 {
  display: flex;
  justify-content: center;
  position: relative;
}

.h1 {
  width: 351px;
  height: 940px;
  background: #ffffff;
  border-radius: 12px;
}
.editor-wrapper {
  height: 30px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid black;
  font-size: 14px;
  opacity: 60%;
}
.h3{
  position: relative;
}
.content{
  position: absolute;
  display: flex;
  justify-content: center;
  top: 40px;
  border-radius: 12px;
  border: 1px solid #000000;
  margin-left: -10px;
}
.ql-container{
  margin-top: 6px;
}
.address{
  height: 30px;
  font-family: 黑体;
  border-radius: 6px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  font-size: 14px;
  opacity: 60%;
}
.h4{
  position: relative;
}
.content1{
  position: absolute;
  display: flex;
  justify-content: center;
  top: 40px;
  border-radius: 12px;
  border: 1px solid #000000;
  margin-left: -10px;
  width: 351px;
}
.kuang1{
  position: absolute;
  top:20px;
}
.h5 {
  position: relative;
  top: 100px;
}
.example-body{
  font-family: 黑体;
  border-radius: 12px;
  border: 1px solid #000000;
  height: 180px;
  position: relative;
}
.filepick{
  font-size: 12px;
  color: rgba(136, 136, 136, 0.4);
  text-align: left;
  line-height: 18px;
}
.h6{
  position: relative;
  top: 150px;
}
.btn{
  border-radius: 12px;
}
</style>